/**
 *
 */
import { ref } from "vue";
/**
 *
 */
import { MenuOption } from "naive-ui";
/**
 *
 */
import { defineStore } from "pinia";

/**
 * 使用函数式写法定义 store
 */
export const useMenuStore = defineStore("menu", () => {
  // state
  const collapsed = ref<boolean>(false);
  const menu = ref<MenuOption[]>([]);

  // actions
  function triggerMenuCollapsed(collapse?: boolean) {
    // 使用 .value 访问和修改 ref 的值
    collapsed.value = collapse ?? !collapsed.value;
  }

  function setMenu(newMenu: MenuOption[] | undefined) {
    if (newMenu) {
      menu.value = newMenu;
      setBadge();
    }
  }

  function setBadge() {
    console.log("长度", menu.value.length);
  }

  return {
    // state
    collapsed,
    menu,
    // actions
    triggerMenuCollapsed,
    setMenu,
  };
});

// export const useMenuStore = defineStore({
//   id: "menu",
//   state: () =>
//     <
//       {
//         collapsed: boolean;
//         menu: MenuOption[];
//       }
//     >{
//       collapsed: false,
//       menu: [],
//     },
//   getters: {},
//   actions: {
//     triggerMenuCollapsed(collapsed?: boolean) {
//       this.collapsed = collapsed ?? !this.collapsed;
//     },
//     setMenu(menu: MenuOption[] | undefined) {
//       // asideRoutes.
//       if (menu) {
//         //@ts-ignore
//         this.menu = menu;
//       }
//     },
//   },
// });
